<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>中国象棋</title>
        <link rel="icon" type="image/jpg" href="images/ico.jpg" sizes="32*32">
        <link rel="stylesheet" href="index.css">
		<script src="js/mui.min.js"></script>
		<!-- <link href="css/mui.min.css" rel="stylesheet"/> -->
		<!-- <script type="text/javascript" charset="utf-8">
		  	mui.init();
		</script> -->
    </head>
    <body>
		<h1>象棋</h1>
        <div id="app">
			
            <div v-for='(item,ind) in xq_Data'>
                <xq :hom='item.hom' :pos='{x:item.x,y:item.y}' :life='item.life' :ind='ind' :dos='item.dos'  @butxq='butXq' ref='chin'></xq>
            </div>
            

            <div v-for='item in xqpos'>
                <xq_read @xqmove='xqMove' :pos=item></xq_read>
            </div>
            <div :class="{gin2:round=='绿方',gin:round=='红方'}"></div>
			
			<h2>{{log}}</h2>
			
			<button @click="Again" class="but" type="button">重新开始</button>
			<button @click="Regret" class="but2" type="button">悔棋</button>
			<button @click="setplay()" class="but3" type="button">游戏音效:{{gameplayMusic}}</button>
			<button @click="setback()" class="but4" type="button">背景音乐:{{backmusicSwitch}}</button>
			
            <audio preload='auto' id="eat" src="music/chi.m4a">
            </audio>
            <audio preload='auto' id="jiangjun" src="./music/jiangjun.m4a">
            </audio>
            <audio preload='auto' id="juesha" src="./music/juesha.m4a">
            </audio>
			<audio preload='auto' id="move" src="./music/move.mp3">
			</audio>
			<audio preload='auto' loop id="backmusic" src="./music/back.mp3">
			</audio>
			<audio preload='auto' id="xuanzhong" src="./music/xuanzhong.mp3">
			</audio>
            
        </div>

        <template id="xq">
            <div v-show='life' :class='{begin:isbegin,red:isred, green:isgreen}' :style="showpos(pos)"  @click='down' class="xq">
                {{dos}}
            </div>
        </template>



        <template id="xq_read">
            <div class="xq_read" @click='retpos' :style="showpos(pos)">
            </div>
        </template>


        <script src="vue.js" ></script>
        <script src="./index.js"></script>
    </body>
</html>